<template>
    <div class="userBox">
      <el-card
        class="box-card"
        :body-style="{ padding: '20px', minHeight: '230px' }"
      >
        <!-- 以下是搜索和新增 -->
        <div class="search">
          <el-form :model="form" ref="ruleForm" :inline="true" size="small">
            <el-form-item prop="pass" label="标签名称" label-width="80px">
              <el-input
                style="width: 200px"
                type="text"
                v-model="form.tagName"
              ></el-input>
            </el-form-item>
            <!-- 状态选择 -->
            <el-form-item label="状态" prop="pass" label-width="80px">
                <el-select v-model="form.state" placeholder="请选择">
                    <el-option label="启用" :value="1"></el-option>
                    <el-option label="禁用" :value="0"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
              <el-button @click="clear">清除</el-button>
              <el-button type="primary" @click="getList">搜索</el-button>
            </el-form-item>
          </el-form>
         <div v-if="this.subjectID">
            <el-button
          type="text"
          icon="el-icon-arrow-left"
          size="small"
          @click="$router.back()"
          >返回学科</el-button>
          <el-button
            type="success"
            icon="el-icon-edit"
            size="small"
            @click="addUSubject"
            >新增标签</el-button>
         </div>
        </div>
        <!-- 以上是搜索和新增 -->
        <!-- 条数显示 -->
        <el-alert
          :title="'数据一共 ' + counts + ' 条'"
          type="info"
          :closable="false"
          show-icon
          :style="{ marginBottom: '15px', marginTop: '18px' }"
        >
        </el-alert>
        <!-- 以上是条数显示 -->
        <!-- 以下是表格 -->
        <el-table
          :data="renderList"
          style="width: 100%"
          :header-cell-style="{
            backgroundColor: '#fafafa',
            color: '#909399'
          }"
        >
          <el-table-column type="index" width="80" label="序号">
          </el-table-column>

          <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
          <el-table-column prop="tagName" label="标签名称"> </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建日期">
            <template #default="{ row }">
              <span>{{ getTime(row.addDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态">
            <template #default="{ row }">
              <span>{{ row.state ? '以启用' : '已禁止' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150px">
            <template #default="{ row }">
                <el-button type="text" size="small"
                @click="preview(row)">{{row.state ? '禁用' : '启用'}}
            </el-button>

              <el-button
              type="text"
              size="small"
              @click="modify(row)"
              :disabled="!!row.state"
                >修改</el-button>
              <el-button
              type="text"
              size="small"
              @click="del(row.id)"
              :disabled="!!row.state"
                >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="pagesizes"
          :page-size="pagesize"
          layout="prev, pager,next,sizes,jumper"
          :total="counts"
          :style="{ display: 'flex', justifyContent: 'end' }"
        >
        </el-pagination>
      </el-card>
      <!-- 增加弹框组件 -->
      <AddDia ref="diaLog" @init="getList"></AddDia>
    </div>
  </template>

<script>
import { list, remove, changeState } from '@/api/hmmm/tags.js'
import { parseTime } from '@/utils'
import AddDia from '../components/tags-add.vue'
export default {
  data () {
    return {
      num: 0,
      form: {
        tagName: '',
        state: ''
      },
      page: 1,
      pagesizes: [5, 10, 20, 50],
      pagesize: 10,
      counts: 0,
      renderList: [],
      subjectID: null
    }
  },
  components: {
    AddDia
  },
  created () {
    if (this.$route.query.id) {
      this.subjectID = this.$route.query.id
      this.getList({
        subjectID: this.subjectID,
        page: this.page,
        pagesize: this.pagesize
      })
      return
    }
    this.getList()
  },
  methods: {
    // 获取渲染数据
    async getList () {
      const obj = {
        subjectID: this.subjectID,
        page: this.page,
        pagesize: this.pagesize
      }
      if (this.form.tagName) obj.tagName = this.form.tagName
      if (this.form.state === 0 || this.form.state === 1) {
        obj.state = this.form.state
      }
      const { data } = await list(obj)
      console.log(data)
      this.renderList = data.items
      this.counts = data.counts
    },
    // 显示时间格式化
    getTime (time) {
      return parseTime(time)
    },
    // 控制显示条数
    handleSizeChange (value) {
      this.pagesize = value
      this.page = 1
      this.getList()
    },
    // 控制显示页数
    handleCurrentChange (value) {
      this.page = value
      this.getList()
    },
    // 清空输入框
    clear () {
      this.form.tagName = ''
      this.form.state = ''
      this.getList()
    },
    async preview (row) {
      const state = row.state ? 0 : 1
      try {
        await changeState({ id: row.id, state })
        this.getList()
        this.$message.success('操作成功')
      } catch (error) {
        this.$message.error('操作失败')
      }
    },
    // 修改
    async modify (row) {
      this.$refs.diaLog.openMyDia(row)
    },
    addUSubject () {
      this.$refs.diaLog.openMyDia()
    },
    // 删除功能
    async del (id) {
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({ id })
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(error => {
          console.log(error)
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
          this.getList()
        })
    }
  }
}
</script>

  <style scoped lang="less">
  .userBox {
    padding: 10px;
  }
  .search {
    display: flex;
    justify-content: space-between;
    height: 32px;
  }
  </style>
